import CodeFlask from "codeflask"
class editor {
    constructor(content, title = undefined, type = undefined) {
        this.id = "edotir-" + this.randomString(8);
        this.element = {
            editor: document.createElement("div"),
            btns: document.createElement("div"),
            close: document.createElement("img"),
            save: document.createElement("img"),
            download: document.createElement("img"),
        }
        this.element.editor.id = this.id;
        this.element.close.src = "data:image/svg+xml;base64, " + data_ico_file_close;
        this.element.save.src = "data:image/svg+xml;base64, " + data_ico_file_save;
        this.element.download.src = "data:image/svg+xml;base64, " + data_ico_file_download;
        this.element.close.addEventListener("click", (e) => {
            this.click(0);
        });
        this.hover(this.element.close);

        this.element.save.addEventListener("click", (e) => {
            this.click(1);
        });
        this.hover(this.element.save);

        this.element.download.addEventListener("click", (e) => {
            this.click(2);
        });
        this.hover(this.element.download);
        this.element.close.style.margin = '5px';
        this.element.save.style.margin = '5px';
        this.element.download.style.margin = '5px';
        this.element.btns.className = "editor_btns";
        this.zIndex = document.querySelectorAll(".editor_btns").length + 10;
        this.element.btns.style.zIndex = this.zIndex;
        this.element.btns.style.backgroundColor = '#11111147';
        this.element.btns.style.position = 'absolute';
        this.element.btns.style.top = '0';
        this.element.btns.style.right = '0';
        this.element.btns.style.height = '25px';
        this.element.btns.style.width = 'auto';
        this.element.btns.style.display = 'flex';
        this.element.btns.style.flexWrap = 'nowrap';
        this.element.btns.style.flexDirection = 'row-reverse';
        this.element.editor.style.zIndex = this.zIndex;
        this.element.editor.style.width = '100vw';
        this.element.editor.style.height = '100vh';
        this.element.btns.appendChild(this.element.close);
        this.element.btns.appendChild(this.element.save);
        this.element.btns.appendChild(this.element.download);
        document.body.appendChild(this.element.editor);
        document.body.appendChild(this.element.btns);
        this.newCodeFlask(content, type);
        this.set_title(title);
    }
    dispose() {
        console.log("delete editor : " + this.id)
        delete this.flask;
        document.body.removeChild(this.element.editor);
        document.body.removeChild(this.element.btns);
        delete this;
    }
    set_title(title) {
        if (title) {
            if (!this.element.title) {
                this.element.title = document.createElement("p");
                this.element.title.style.height = '25px';
                this.element.title.style.margin = '0 5px 0 5px';
                this.element.btns.appendChild(this.element.title);
            }
            if (typeof title === 'string')
                this.element.title.innerText = title;
            else if (typeof title === 'function')
                this.element.title.innerText = title();
        }
    }
    hover(obj) {
        obj.onmouseenter = () => {
            obj.style.transform = "scale(1.2, 1.2)";
        }
        obj.onmouseleave = () => {
            obj.style.transform = "";
        }
    }
    click(save) {
        if (save == 1) {
            console.log('upload')
            if (this.upload_cb)
                this.upload_cb(this.flask.getCode());
        } else if (save == 2) {
            console.log('download')
            if (this.save_cb)
                this.save_cb(this.flask.getCode());
        } else if (save == 0) {
            console.log("close")
            this.dispose();
        }
    }
    randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = $chars.length;
        var pwd = '';
        for (let i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
    newCodeFlask(content, type) {
        this.flask = new CodeFlask(this.element.editor, {
            language: type ? type : 'js',
            lineNumbers: true,
        });
        this.flask.onUpdate(this.data_change);
        if (typeof content === 'string')
            this.flask.updateCode(content);
        else if (typeof content === 'function ')
            this.flask.updateCode(content());
        console.log(this.flask.getCode());
    }
    data_change(data) {
        if (this.change_cb)
            this.change_cb(data);
    }
    change(cb) {
        this.change_cb = cb;
    }
    upload(cb) {
        this.upload_cb = cb;
    }
    save(cb) {
        this.save_cb = cb;
    }
}